<template>
    <el-tabs type="border-card" :style="{height:`${height}px`}">
        <el-tab-pane label="编辑用户">
            <el-form
                label-width="90px"
                :model="formLabelAlign"
                ref="ruleForm"
            >

                <el-form-item label="用户头像">
                    <el-upload
                            class="avatar-uploader"
                            action="string"
                            :http-request="uploadImg"
                            :show-file-list="false"
                    >
                        <img v-if="formLabelAlign.image_url" :src="formLabelAlign.image_url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>


                <el-form-item label="用户名" prop="user_name">
                    <el-input
                        style="width: 50%;"
                        v-model="formLabelAlign.user_name"
                    > </el-input>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="submit">立即提交</el-button>
                </el-form-item>

            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {getHeight} from "@/utils/regular";
    import { userInfoDetail,userInfoEdit } from '@/api/user'
    import {fileUpload} from '@/api/article'
    import { mapGetters } from 'vuex'

    export default {
        name: "userEdit",
        data() {
            return {
                height:0,
                formLabelAlign:{
                    user_name:'',
                    image_url:'',
                },
                groupArr:[],
            }
        },
        computed: {
            // 获取用户数据
            ...mapGetters({
                user: 'user/getUser',
            }),
        },
        created(){
            // console.log(this.user)
            this.getDetail()
            this.height = getHeight() - 92
        },
        methods: {
            getDetail() {
                userInfoDetail(this.user.user_id)
                    .then(res=>{
                        if(Number(res.code)===0){
                            let data = res.data
                            Object.assign(this.formLabelAlign,{
                                user_name:data.user_name,
                                image_url:data.image_url,
                            })
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            },
            // 图片上传
            uploadImg(data){
                let file = data.file
                fileUpload(file)
                    .then(res=>{
                        if(Number(res.code)===0){
                            this.formLabelAlign.image_url = res.data.file_url
                        }else{
                            this.$Alert({ message:res.msg,type:'error' })
                        }
                    })
            },
            submit(){
                let formLabelAlign = this.formLabelAlign
                // console.log(formLabelAlign)
                let params = {
                    user_name:formLabelAlign.user_name,
                    image_url:formLabelAlign.image_url,
                }

                userInfoEdit(this.user.user_id,params)
                    .then(res=>{
                        if(Number(res.code)===0){
                            this.$Alert({
                                message:res.msg,
                                type:'success',
                                callback:()=>{
                                    this.$store.commit('user/setUser',res.data)
                                    this.$router.push('/')
                                }
                            })
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            }
        },
    }
</script>

<style scoped>
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
